<template>
  <a-card title="待办日历" class="warp">
    <a-calendar :header-render="headerRender" v-model="calendarValue" >
      <template slot="dateCellRender" slot-scope="value">
        <a-dropdown :trigger="['contextmenu']">
          <ul class="events" v-if="backlogList[getDateFormat(value)]" @dblclick="handleDbclick">
            <li v-for="(item,i) in backlogList[getDateFormat(value)] || []" :key="i">
              <a-badge status="success" :text="item.record" />
            </li>
          </ul>
          <div style="height:100%;width:100%;"  @dblclick="handleDbclick" v-else></div>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="handleDetail(value)">
              详情
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </a-calendar>
    <pending-work-modal
      ref="pendingWorkModel"
      :calendarValue="calendarValue"
      @init="init"
    >
    </pending-work-modal>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import moment from 'moment'
import pendingWorkModal from './modal/pendingWorkModal'

import { mapState } from 'vuex'
export default {
  name: 'pendingWork',
  components: {
    pendingWorkModal
  },
  data() {
    return {
      url: {
        backlogList: '/backlog/queryBacklogList'
      },
      backlogList: {}, // 按日期转换后的数据
      calendarValue: moment(new Date())
    }
  },
  watch: {
    calendarValue: {
      handler(newVal) {
        this.init()
      },
      deep: true
    }
  },
  computed: {
    ...mapState({
      username: state => state.user.username
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    handleDbclick() {
      this.$refs.pendingWorkModel.editModalVisible = true
    },
    init() {
      const year = this.calendarValue.year()
      const month = this.calendarValue.month() + 1
      const lastDay = new Date(year, month, 0).getDate()
      getAction(this.url.backlogList, {// 获取当月待办工作
        startTime: year + '-' + month + '-1' + ' 00:00:00',
        endTime: year + '-' + month + '-' + lastDay + ' 23:59:59',
        userId: this.username
      }).then(res => {
        if (res.success) {
          this.getBacklogList(res.result)
        }
      })
    },
    getBacklogList(list) { // 把请求回的数据按日期转换为对象
      this.backlogList = {}
      list.forEach(item => {
        if (item.planTime) {
          const key = moment(item.planTime).format('YYYY-MM-DD')
          this.backlogList[key] ? this.backlogList[key].push(item) : this.backlogList[key] = [item]
        }
      })
    },
    getDateFormat(value) {
      return moment(value).format('YYYY-MM-DD')
    },
    handleDetail(value) {
      this.calendarValue = moment(value)
      this.$refs.pendingWorkModel.editModalVisible = true
    },
    headerRender({ value, type, onChange, onTypeChange }) { // 自定义日历头   取消年月切换
      const start = 0
      const end = 12
      const monthOptions = []
      const current = value.clone()
      const localeData = value.localeData()
      const months = []
      for (let i = 0; i < 12; i++) {
        current.month(i)
        months.push(localeData.monthsShort(current))
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class='month-item' key={`${index}`}>
            {months[index]}
          </a-select-option>,
        )
      }
      const month = value.month()
      const year = value.year()
      const options = []
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class='year-item'>
            {i}
          </a-select-option>,
        )
      }
      return (
        <div style={{ padding: '10px' }}>
          <a-row type='flex' gutter={16} justify='end'>
            <a-col>
              <a-select
                dropdownMatchSelectWidth={false}
                class='my-year-select'
                style={{width:'100px'}}
                onChange={newYear => {
                  const now = value.clone().year(newYear)
                  onChange(now)
                }}
                value={String(year)}
              >
                {options}
              </a-select>
            </a-col>
            <a-col>
              <a-select
                dropdownMatchSelectWidth={false}
                value={String(month)}
                style={{width:'100px'}}
                onChange={selectedMonth => {
                  const newValue = value.clone()
                  newValue.month(parseInt(selectedMonth, 10))
                  onChange(newValue)
                }}
              >
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      )
    }
  }
}
</script>
<style>
.warp .ant-fullcalendar-fullscreen .ant-fullcalendar-month,
.warp .ant-fullcalendar-fullscreen .ant-fullcalendar-date
{
  height:100px;
}
.warp .ant-fullcalendar-fullscreen .ant-fullcalendar-content{
  height:72px;
}
.warp .ant-fullcalendar-column-header{
  background: rgb(234, 234, 234);
  border: 1px solid white;
}
.ant-fullcalendar .ant-fullcalendar-calendar-body thead tr{
  height: 40px;
}
</style>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}

</style>
